<!-- 毛利表 -->
<template>
	<view class="layout">
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<u-scroll-list :indicator="false">
			<view class="top-view p-t-20">
				<view class="flex flex-sa f-35 m-b-10">
					<view class="f-35">
						<view class="flex flex-c f-32 text-color"> 总销售额 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.canUsePiecesCount||0}} </view>
					</view>
					<view class="f-35">
						<view class="flex flex-c f-32 text-color"> 总成本 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.waitQuantityOut||0}} </view>
					</view>
					<view class="f-35">
						<view class="flex flex-c f-32 text-color"> 总毛利 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.canUseQuantity||0}} </view>
					</view>
				</view>
			</view>
		</u-scroll-list>
		<c-time>
			<view class="flex opt-view" slot="content">
				<view class="check-account flex select-item">
					<text class="grey p-r-10">业务员</text>
					<u-icon name="arrow-down-fill" color="#ccc" size="10"></u-icon>
				</view>
				<view class="check-account flex select-item">
					<text class="grey p-r-10">门店</text>
					<u-icon name="arrow-down-fill" color="#ccc" size="10"></u-icon>
				</view>
			</view>
			<view class="flex opts-view">
				<view class="check-account flex select-item">
					<text class="grey p-r-6">客户</text>
					<u-icon name="arrow-down-fill" color="#ccc" size="10"></u-icon>
				</view>
				<view class="check-account flex select-item">
					<text class="grey p-r-6">产品</text>
					<u-icon name="arrow-down-fill" color="#ccc" size="10"></u-icon>
				</view>
				<view class="check-account flex select-item">
					<text class="grey p-r-6">布类型</text>
					<u-icon name="arrow-down-fill" color="#ccc" size="10"></u-icon>
				</view>
			</view>
		</c-time>
		
		<!-- 列表 -->
		<view style="height: 100%;">
			  <mosoweTable class="table-view" :column="column" :localData="requestMethod" background="#eee" dataListKey="content" dataTotalKey="totalCount"
				  @onSortChange="onSortChange"
				  @onGetTdItemChange="toNextPage"
				  :pagination = 'false'
			  >
			  <!-- slot="nameDefault"  插槽是根据column 下每个对象下的value值 + 固定值(Default) 进行覆盖渲染-->
				  <template slot="widthValueDefault" slot-scope="colnum">
					<view class="a-i-c">
						<text>{{ colnum.rowData.widthValue||0 }}</text>/
						<text>{{ colnum.rowData.gramWeightValue|| 0}}</text>
					</view>
				  </template>
				  <template slot="currentPiecesCountDefault" slot-scope="colnum">
					<view class="a-i-c">
						<view><text class="blue p-r-10">{{ colnum.rowData.currentQuantity||0 }}</text><text class="grey">米</text></view>
						
						<view>{{ colnum.rowData.currentPiecesCount|| 0}}</view>
					</view>
				  </template>
			  </mosoweTable>
		</view>
		
		
		<!-- 底部导航 -->
		<view class="f-bar flex">
			<view class="f-bar-item" v-for="(item,index) in footList" :key="index" @click="onChange(index)">
				<u-icon :name="item.icon" color="#409EFF" size="18" v-if="footIndex==index"></u-icon>
				<u-icon :name="item.icon" color="#999" size="18" v-else></u-icon>
				<view class="t-view" :class="{'blue':footIndex==index}">{{item.label}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import cTime from '@/pages/application/pages/finance/accounts-receivable-payable/components/time.vue'
	import mosoweTable from '@/components/mosowe-table/mosowe-table.vue'
	// import columnObject from '../../utils/column.js'
	export default {
		name: '',
		components: {
			cTime,
			mosoweTable
		},
		data() {
			return {
				config: {
				  title: "毛利表",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe888;",
				      position: "left",
				    },
					{
					  key: "btn2",
					  icon: "&#xe888;",
					  position: "left",
					},
				  ],
				},
				show: false,
				// 总数
				total_data: {},
				// 底部导航
				footIndex: 5,
				footList: [{
					label: '门店',
					icon: 'home'
				},{label: '布类别', icon: 'photo'}, {label: '业务员', icon: 'play-right'}, {label: '客户', icon: 'account'}, {label: '产品', icon: 'home'}, {label: '明细', icon: 'photo'}],
				// 表格
				requestMethod:[],
				column: [{
					text: '名',
					value: 'index',
					fixed: 'left',
					width: 40
				},{
					text: '门店',
					value: 'colorNumber',
					align: 'center',
					fixed: 'left'
				},
				{
					text: '出库数',
					value: 'canDeliverUseQuantity',
					sortable: true,
					align: 'center'
				},
				{
					text: '计价数',
					value: 'storeName',
					sortable: true,
					align: 'center'
				}],
				// obj: columnObject
			}
		},
		methods: {
			clickBtn(item) {
			  console.log("index", item);
				if (item.key === "btn2") {
					this.show = true
				}
			},
			// 导航切换
			onChange(e) {
				console.log('click1', e);
				this.footIndex = e
				switch (e){
					case 0:
						this.column[1] = {
							text: '门店',
							value: 'colorNumber',
							align: 'center',
							fixed: 'left'
						}
						break;
					case 1:
						this.column[1] = {
							text: '布类型',
							value: 'colorNumber',
							align: 'center',
							fixed: 'left'
						}
						break;
					case 2:
						this.column[1] = {
							text: '业务员',
							value: 'colorNumber',
							align: 'center',
							fixed: 'left'
						}
						break;
					case 3:
						this.column[1] = {
							text: '客户',
							value: 'colorNumber',
							align: 'center',
							fixed: 'left'
						}
						break;
					case 4:
						this.column[1] = {
							text: '产品',
							value: 'colorNumber',
							align: 'center',
							fixed: 'left'
						}
						break;
					case 5:
						this.column = [{
							text: '名',
							value: 'index',
							fixed: 'left',
							width: 40
						},{
							text: '产品',
							value: 'colorNumber',
							align: 'center',
							fixed: 'left'
						},
						{
							text: '颜色',
							value: 'canDeliverUseQuantity',
							align: 'center'
						},
						{
							text: '缸号',
							value: 'storeName',
							align: 'center'
						}]
						break;
					default:
						break;
				}
				
			},
			// 排序
			onSortChange(obj) {
				console.error(obj)
			},
			// 下一页
			toNextPage() {
				
			}
		},
		mounted() {
			
		}
	}
</script>
<style lang="scss" scoped>
	.top-view {
		flex: 1;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
		color: #fff;
	}
	.u-scroll-list {
		padding: 0;
	}
	.opt-view {
		flex: 1;
		justify-content: space-around;
	}
	.opts-view {
		background: #fff;
		justify-content: space-between;
		border-top: 1rpx solid #999;
		margin: 0 10rpx;
		padding: 16rpx 0;
	}
	.uni-table-th {
		background: #ebeef5 !important;
	}
	.f-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background: #fff;
		z-index: 10;
		padding: 10rpx 0;
		height: 88rpx;
		box-sizing: border-box;
		.f-bar-item {
			display: flex;
			flex: 1;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			.t-view {
				font-size: 24rpx;
				color: #333;
			}
		}
	}
</style>